<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <span>设置</span>
    </div>
    <!-- 内容区 -->
    <div class="content">
       <!-- 第一个：改用户名 -->
      <van-cell is-link @click="showPopupyh" :style="{ cursor: activecursor }"
        >绑定用户名 <span class="yonghuming">{{ msg }}</span></van-cell
      >
      <van-popup v-model="showyh" class="mima">
        <h3>绑定用户名</h3>
        <input type="text" placeholder="自定义用户名" v-model="user" />
        <van-button size="large" round color="red" @click="userName">
          绑定用户名
        </van-button>
      </van-popup>
      <!-- 第二个：改密码 -->
      <van-cell is-link @click="showPopupmm">修改密码 </van-cell>
      <van-popup v-model="showmm" class="mima">
        <h3>更新密码</h3>
        <input type="text" placeholder="原始密码" v-model="oldpass" />
        <input type="text" placeholder="新密码" v-model="newpass" />
        <van-button size="large" round color="red" @click="passWord">
          更新
        </van-button>
      </van-popup>
    </div>
    <van-button
      size="large"
      round
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      @click="zhuxiao"
    >
      退出登录
    </van-button>
  </div>
</template>
  
  <script>
import axios from '@/utils/service';
// 发请求

export default {
  name: "Updatepassword",
  data() {
    return {
      showyh: false,
      showmm: false,
      user: "15615601560",
      msg: "",
      oldpass: "ZXCzxc123",
      newpass: "",
      activecursor: "default",
    };
  },
  created() {
    this.axios({
      url: "/api/user/info",
      params: {
        userid: localStorage.getItem("userid"),
      },
    }).then((res) => {
      console.log(res.data);
    });
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    showPopupyh() {
      this.showyh = true;
    },
    showPopupmm() {
      this.showmm = true;
    },
    zhuxiao() {
      // localStorage.clear();
      this.$router.push("/Login");
      localStorage.removeItem("token")
      localStorage.removeItem("userid")
      localStorage.removeItem("username")
    },
    userName() {
      axios({
        url: "/api/user/bindusername",
        params: {
          userid: localStorage.getItem("userid"),
          username: this.user,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.msg = this.user;
          this.showyh = false;
        }
      });
    },
    passWord() {
      axios({
        url: "/api/user/updatePassword",
        params: {
          userid: localStorage.getItem("userid"),
          oldpassword: this.oldpass,
          newpassword: this.newpass,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$router.push("/Login");
        }
      });
    },
  },
};
</script>
  
  <style scoped>
  .header {
  height: 3.5rem;
  text-align: center;
  font-size: 1.3rem;
  line-height: 3.5rem;
  border-bottom: 2px solid gray;
}
.van-icon {
  float: left;
  padding-left: 10px;
  line-height: 3.5rem;
  color: rgb(24, 24, 64);
}

.content {
  flex: 1;
  overflow: auto;
}

.mima {
  width: 15.625rem;
  /* height: 12.5rem; */
  text-align: center;
  padding: 0.625rem 0;
}
.mima input {
  margin: 0.9375rem 0;
  border: none;
}

.yonghuming {
  margin-left: 9.375rem;
}
</style>